<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-22 13:41:33
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>Document</title>
  <style>
    .body {
      padding: 0 !important;
      overflow: hidden;
    }

    .body .table {
      margin-top: 20px;
    }

    .allPro {
      height: 425px !important;
      overflow-y: auto;
      margin-bottom: 15px;
    }
  </style>
</head>

<body class="ghcj2" id="app">
  <div class="body">
    <div class="tab-group">
      <div class="tab_button">
        <div class="group_title">与本项目关联的项目</div>
      </div>
      <div class="input-btn" v-if="!showCheckBox">
        <button class="button_warning_plain ">
          <img src="./common/img/ghcj2/link.png" style="margin-right: 8px;" />添加关联项目
        </button>
        &ensp;&ensp;
        <button class="button_primary_plain" @click="showCheckBox = true">
          <img src="./common/img/ghcj2/relation.png" style="margin-right: 8px;" />管理关联项目
        </button>
      </div>
      <div class="input-btn" v-if="showCheckBox" @click="showCheckBox = false">
        <button class="button_primary_plain ">
          完成
        </button>
        &ensp;&ensp;
        <button class="button_error " @click="changeLinkProject">
          <img src="./common/img/ghcj2/noLink.png" style="margin-right: 8px;" />解除关联
        </button>
      </div>
    </div>
  </div>
  <div class="allPro">
    <div class="itemUpdatePro" :class="showCheckBox? 'itemUpdateProCheckBox ' : ''" v-for="(item,index) in list"
      :key="index">
      <div class="itemUpdatePro_title">
        <div class="pro_title_text"><img src="./common/img/title.png" width="20px" height="20px" />基层治理协同协同项目
        </div>
        <div class="pro_title_date">2021-10-20至2022-10-30</div>
      </div>
      <label class="itemUpdatePro_info">
        <input v-if="showCheckBox" class="checkbox" type="checkbox" @change="checkBoxChange" :value="index+1">
        <div class="info_item">
          <div class="info_item_box">
            <div class="info_item_box_tip">商务经理</div>
            <div class="info_item_box_text">某某某</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">项目类型</div>
            <div class="info_item_box_text">软硬件项目</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">重要程度</div>
            <div class="info_item_box_text">----</div>
          </div>
        </div>
        <div class="info_item">
          <div class="info_item_box">
            <div class="info_item_box_tip">售前经理</div>
            <div class="info_item_box_text">某某某</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">项目方向</div>
            <div class="info_item_box_text">软硬件项目</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">紧急程度</div>
            <div class="info_item_box_text">----</div>
          </div>
        </div>
        <div class="info_item">
          <div class="info_item_box">
            <div class="info_item_box_tip">项目经理</div>
            <div class="info_item_box_text">某某某</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">项目状态</div>
            <div class="info_item_box_text">软硬件项目</div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">项目阶段</div>
            <div class="info_item_box_text">----</div>
          </div>
        </div>
        <div class="info_item">
          <div class="info_item_box">
            <div class="info_item_box_tip">时间进度</div>
            <div class="info_item_box_text info_item_box_progress">
              <div class="progress">
                <div class="progress_line">
                  <div class="progress_line_inner" :style="{width: item.num+'%'}"></div>
                </div>
                <div class="progress_text">{{item.num}}%</div>
              </div>
            </div>
          </div>
          <div class="info_item_box">
            <div class="info_item_box_tip">自评进度</div>
            <div class="info_item_box_text info_item_box_progress">
              <div class="progress">
                <div class="progress_line">
                  <div class="progress_line_inner" :style="{width: item.num+'%'}"></div>
                </div>
                <div class="progress_text">{{item.num}}%</div>
              </div>
            </div>
          </div>
        </div>
      </label>
      <div class="rightCutLink" @click.stop="changeLinkProject(index+1)" v-if="showCheckBox">
        <img src="./common/img/ghcj2/noLink.png" style="margin-right: 8px;" />解除关联
      </div>
    </div>
  </div>
  <div class="pagination">
    <span>共 {{total}} 条</span>
    <ul>
      <li @click="shang"><i class="bi bi-chevron-left"></i></li>
      <li v-show="start > 0" @click="()=>{
              if(start > 0){
                params.page = start;
                end-=3
                start-=3
              }
            }">
        ...
      </li>
      <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
        :class="[item == params.page ? 'active' :'']">
        {{item}}
      </li>
      <li v-show="end <= totalPage" @click="()=>{
              if(end <= totalPage){
              params.page = end;
              end+=3
              start+=3
              }
            }">
        ...
      </li>
      <li @click="next"><i class="bi bi-chevron-right"></i></li>
    </ul>
  </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [],
        params: {
          page: 1,
          limit: 10,
        },
        showCheckBox: false,
        checkedList: []
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      // 选择关联项目
      checkBoxChange(e) {
        if (this.checkedList.includes(e.target.value)) {
          let index = this.getArrIndex(e.target.value)
          this.checkedList.splice(index, 1)
        } else {
          this.checkedList.push(e.target.value)
        }
        console.log(this.checkedList)
      },
      // 解除关联
      changeLinkProject(index) {
        if (index) {
          // 单个项目解除
          console.log(index)
          alert(index)
        } else {
          // 多选解除
        }
      },
      getArrIndex(val) {
        for (let i = 0; i < this.checkedList.length; i++) {
          if (val == this.checkedList[i]) {
            return i
          }
        }
      },
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
        this.list = [
          {
            value: "吴恒",
            num: 25
          },
          {
            value: "吴恒",
            num: 25
          },
          {
            value: "吴恒",
            num: 25
          },
          {
            value: "吴恒",
            num: 25
          },
        ];
      },
    },
  }).mount("#app");

</script>

</html>